import React, { useState, useRef } from 'react';
import { Form, Button, Divider, Input, Select, message, Popconfirm, TreeSelect, Table } from 'antd';
import { connect } from 'umi';
import styles from './index.less';
import TableList from '@/pages/CommodityManagement/CommodityItems';
import { uploadCommodityStep } from '../../service';
const Step4 = (props) => {
  const { handleCurrent, handleAttr, complete, CommodityId } = props;
  const [selectAttr, setSelectAttr] = useState([]);
  const onFinish = () => {
    if (selectAttr.length === 0) {
      message.info('请至少创建一个商品品项');
    } else {
      uploadCommodityStep(CommodityId, 0);
      complete(false);
    }
  };
  const handleBack = () => {
    handleCurrent(2);
  };
  const handleAttributes = (payload) => {
    setSelectAttr(payload);
  };

  return (
    <div className={styles.attributes_div}>
      <TableList handleOnchange={handleAttributes} id={CommodityId} />
      <div className={styles.bottom_btn}>
        <Button onClick={handleBack}>上一步</Button>
        <Divider type="vertical" />
        <Button type="primary" onClick={onFinish}>
          完成
        </Button>
      </div>
    </div>
  );
};

export default connect(({ commodityManagementAndCommodityCreatingSteps }) => ({
  data: commodityManagementAndCommodityCreatingSteps.step,
}))(Step4);
